<script setup lang="ts">
import { useData } from "vitepress";
import DefaultTheme from "vitepress/theme";
import { nextTick, provide } from "vue";
import { useRoute } from "vitepress";
// the default layout we'll create next
// @ts-ignore
import FrameDefaultLayout from "/components/FrameDefaultLayout.vue";

const route = useRoute();

const { isDark } = useData();

const enableTransitions = () =>
  "startViewTransition" in document &&
  window.matchMedia("(prefers-reduced-motion: no-preference)").matches;

provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
  if (!enableTransitions()) {
    isDark.value = !isDark.value;
    return;
  }

  const clipPath = [
    `circle(0px at ${x}px ${y}px)`,
    `circle(${Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y)
    )}px at ${x}px ${y}px)`,
  ];

  // @ts-ignore
  await document.startViewTransition(async () => {
    isDark.value = !isDark.value;
    await nextTick();
  }).ready;

  document.documentElement.animate(
    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
    {
      duration: 300,
      easing: "ease-in",
      pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
    }
  );
});
</script>

<template>
  <FrameDefaultLayout v-if="route.path.startsWith('/frames/default')" />
  <DefaultTheme.Layout v-else>
    <!-- <template #aside-outline-before>
      我是组件插槽aside-outline-before
    </template> -->
    <template #aside-outline-after>
      <div
        class="iponeBg"
        v-if="route.path.includes('/view/markdown-examples')"
      >
        <iframe
          class="iponeBg_iframe"
          src="https://mpos.yummall.cn/yinshi/privacy.html"
        >
        </iframe>
      </div>
    </template>
    <!-- <template #sidebar-nav-before> 我是组件插槽sidebar-nav-before </template> -->
    <!-- <template #sidebar-nav-after> 我是组件插槽sidebar-nav-after </template> -->
  </DefaultTheme.Layout>
</template>

<style lang="scss">
// 更改默认全局布局样式
.container {
  justify-content: space-between !important;
  .content {
    flex: 1 !important;
  }
  .aside {
    max-width: 390px !important;
    flex: 0 !important;

    .aside-container {
      width: auto !important;
      position: relative !important;
      padding-top: 0 !important;
      min-width: 200px !important;
    }
  }
}

.iponeBg {
  margin-top: 16px;
  width: 360px;
  background-image: url(/public/images/iphone13.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .iponeBg_iframe {
    width: 330px;
    height: 600px;
    margin: 40px 15px 35px;
    border-radius: 10px;
    border: 0px solid !important;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
.dark::view-transition-new(root) {
  z-index: 1;
}

::view-transition-new(root),
.dark::view-transition-old(root) {
  z-index: 9999;
}

.VPSwitchAppearance {
  width: 22px !important;
}

.VPSwitchAppearance .check {
  transform: none !important;
}
</style>
